<template>
	<view class="wrap">
		<view class="top">
			<view style="display: flex;">
				<image mode="aspectFit" src="../../static/icon_carrier.png"></image>
				<picker @change="changeEtp" :value="indexEtp" :range="etpArray">
					<view :style="{ color: etpName == '请选择' ? '#999999' : '#333333' }">{{etpName}}</view>
				</picker>
			</view>
			<view class="messagetips" @click.stop="jumpMessage()">
				<image style="width: 20rpx;height: 21rpx;padding-right: 10rpx;" mode="aspectFit"
					src="../../static/tips.png"></image>
				<text :class="messagetips?'tipstext':''" v-if="messagetips">{{messagetips}}</text>
				<text :class="messagetips?'tipstext':''" v-if="!messagetips && buesinessNum">{{messagetips}}</text>

			</view>
		</view>
		<view class="filter-wrap">
			<view class="filter">
				<view class="left">
					<view class="item" @click="selectTeam(1)">
						<view>发布时间</view>
						<view class="icon-box">
							<view class="up-triangle" :class="{'active':sortTYpe === 2}"></view>
							<view class="down-triangle" :class="{'active':sortTYpe === 1}"></view>
						</view>
					</view>
					<view class="item" @click="selectTeam(2)">
						<view>运单金额</view>
						<view class="icon-box">
							<view class="up-triangle" :class="{'active':sortTYpe === 4}"></view>
							<view class="down-triangle" :class="{'active':sortTYpe === 3}"></view>
						</view>
					</view>
					<view class="item" @click="selectTeam(3)">
						<view>截止时间</view>
						<view class="icon-box">
							<view class="up-triangle" :class="{'active':sortTYpe === 6}"></view>
							<view class="down-triangle" :class="{'active':sortTYpe === 5}"></view>
						</view>
					</view>
				</view>
				<!-- <view class="right" @click="">
					<image src="../../static/icon_menu.png" mode=""></image>
				</view> -->
				<view class="filter-wrapper">
					<view v-if="showMask" class="mask mask-zoom mask-show"
						style="background-color: rgba(0, 0, 0, 0); z-index: 10001; transition: all 0.3s ease-in-out 0s;"
						@click="onMask" @touchmove.stop.prevent="moveHandle"></view>
					<view class="filter-btn right" @click="onBtn">
						<image src="../../static/icon_menu.png" mode=""></image>
					</view>
					<view :class="showFilter ? 'float--active' : 'float-list-box'" @touchmove.stop.prevent="moveHandle">
						
						<scroll-view scroll-y style="width: 450rpx; max-height: 90vh;">
							<view class="float-list">
								<view class="float-title">
									线路
								</view>
								<view class="float-content-area float-content">
									<view class="float-content-area_item">
										<city-select v-model="startCity" :cityList="regionList" />
										<!-- <picker @change="bindPickerChangeStart" @columnchange="columnchangeStart" :value="startIndex" :range="areaListsStart" mode=multiSelector range-key="label">
											<view class="float-content-area_item--select">{{ areaListsStart[1][startIndex[1]].label }}</view>
										</picker> -->
										<!-- <view class="float-content-area_item--select">
											<input class="uni-combox__input" type="text" :placeholder="placeholder"
														placeholder-class="uni-combox__input-plac" v-model="startCity" @input="onInput" @focus="onFocus" 
											@blur="onBlur" />
										</view>
										<view class="uni-combox__selector" v-if="showSelector">
											<view class="uni-popper__arrow"></view>
											<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
												<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" 
												@click="onSelectorClick(index)">
													<text>{{item.label}}</text>
												</view>
											</scroll-view>
										</view> -->
									</view>
									<view class="" style="margin: 0 20rpx;">
										-
									</view>
									<view class="float-content-area_item">
										<city-select position="right" v-model="endCity" :cityList="regionList" />
										<!-- <picker @change="bindPickerChangeEnd" @columnchange="columnchangeEnd" :value="endIndex" :range="areaListsEnd" mode=multiSelector range-key="label">
											<view class="float-content-area_item--select">{{ areaListsEnd[1][endIndex[1]].label }}</view>
										</picker> -->
									</view>
								</view>
								<view class="float-title">
									常跑线路
								</view>
								<view class="float-content-area-l">
									<view class="float-content-area-l_item" v-for="(item, index) in longList" :key="index" @click="longSelcet(index)" :class="longIndex == index ? 'active' : ''">
										{{ item.cityStart1 + (item.cityStart2?'/':'') + item.cityStart2 + (item.cityStart3?'/':'') + item.cityStart3}}
										<text style="padding: 0 20rpx;">-</text>
										{{ item.cityEnd1 + (item.cityEnd2?'/':'') + item.cityEnd2 + (item.cityEnd3?'/':'') + item.cityEnd3}}
										<uni-icons type="checkmarkempty" size="10" color="#fff" v-if="longIndex == index" style="position: absolute;bottom: -6rpx;right: 0;z-index: 1;"></uni-icons>
									</view>
									<view class="float-content-area-l_item" v-if="longList.length === 0">
										无
									</view>
								</view>
								<view class="float-title">
									货物
								</view>
								<view class="float-content-input float-content">
									<input v-model.trim="goodsName" class="float-content-input-input"/>
									<view class="float-content-input-close" v-if="!!goodsName" @click="clearInput('goodsName')" style="padding-left: 10rpx;">
										<icon class="icon-small" type="cancel" size="14" color="#333" ></icon>
									</view>
								</view>
								<view class="float-title">
									项目
								</view>
								<view class="float-content-input float-content">
									<input v-model.trim="itemName" class="float-content-input-input"/>
									<view class="float-content-input-close" v-if="!!itemName" @click="clearInput('itemName')" style="padding-left: 10rpx;">
										<icon class="icon-small" type="cancel" size="14" color="#333" ></icon>
									</view>
								</view>
								<view class="float-title">
									备注
								</view>
								<view class="float-content-input float-content">
									<input v-model.trim="goodsRemarks" class="float-content-input-input"/>
									<view class="float-content-input-close" v-if="!!goodsRemarks" @click="clearInput('goodsRemarks')" style="padding-left: 10rpx;">
										<icon class="icon-small" type="cancel" size="14" color="#333" ></icon>
									</view>
								</view>
								<view class="float-footer">
									<view class="float-footer-button" style="margin-right: 20rpx;">
										<button size="mini" style="background: #2979ff;color: #fff" @click="onFloatSubmit">筛选</button>
									</view>
									<view class="float-footer-button">
										<button size="mini" @click="onFloatReset">重置</button>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="body-wrap">
			<!-- <view class="empty" v-if="!orderList.length">
				<view style="margin-bottom: 50rpx;">
					<image mode="aspectFit" src="../../static/icon_supply_img.png"></image>
				</view>
				<view>当前暂无可抢订单</view>
			</view> -->
			<view>
				<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :empty="{use: false}">
					<view class="item" @click="goDetail(item.waybillId)" v-for="(item, index) in orderList" :key="index">
						<view class="company">
							<view class="name">所属项目：{{item.itemName}}</view>
							<view class="phone" @click.stop="makePhoneCall(item.shippingUserTel)" v-if="showContact">
								<image src="../../static/icon_phone.png" mode=""></image>
								<text>联系货主</text>
							</view>
						</view>
						<view class="info-wrap"
							:style="{background: item.planShippingNum - item.shippedNum > 0 ? '#4089ff' : '#ccc'}">
							<view class="left">
								<view class="time">装货时间：{{item.planBeginTime}}</view>
								<view class="z-body">
									<view class="line" style="width: 55%;display: inline-block;">
										<view class="address">
											<text class="circle start">装</text>
											<text class="text">{{item.shippingCity}}{{item.shippingAddress}}</text>
										</view>
										<view style="display: flex; align-items: center;font-size: 24rpx;">
											<image style="width: 20rpx;height: 21rpx;padding: 30rpx 0;margin: 0 5rpx;"
												mode="aspectFit" src="../../static/icon_carrier_h.png">
												</image>
												<text v-show="item.distance" style="padding-left: 32rpx;"> {{item.distance}}Km</text>
										</view>
										<view class="address">
											<text class="circle end">卸</text>
											<text class="text">{{item.receiptCity}}{{item.receiptAddress}}</text>
										</view>
									</view>
									<view class="" style="width: 45%;display: inline-block;float: right;padding-left: 20rpx;box-sizing: border-box;">
										<view style="display: flex;align-items: flex-end;min-height: 55rpx;">
											<view class="" style="flex: 1;font-size: 28rpx;color: #2979ff;display: inline-block;padding-top: 16rpx;padding-right: 8rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
												{{item.goodsName}}
											</view>
											<!-- <view class="" style="font-size: 24rpx;color: #2979ff;display: inline-block;white-space: nowrap;padding-right: 4rpx;" v-if="item.projectDisplay == 1">
												{{ item.itemName.length > 6 ? (item.itemName.substring(0, 6) + '...') : item.itemName}}
											</view> -->
										</view>
										<view class="" style="font-size: 20rpx;color: #999;padding-top: 8rpx;" v-if="item.unitPriceDisplay == 1">
											运输单价
										</view>
										<view class="" style="font-size: 20rpx;color: #999" v-if="item.unitPriceDisplay == 1">
											<text style="font-size: 38rpx;color: #f00;padding-right: 10rpx;" decode><text style="font-size: 20rpx;padding-right: 10rpx;">¥</text>{{item.shippingPrice}}</text>元/{{item.unit}}
										</view>
									</view>
								</view>
								<!-- <view style="font-size: 28rpx;color: #333;">所属项目： {{ item.itemName }}</view> -->
								<view class="goods-info">
									<view class="goods">{{item.goodsRemarks}}</view>
									<!-- <view class="price-info" v-if="item.unitPriceDisplay == 1">
										<view class="desc">运输单价:</view>
										<view class="price">
											<text class="red">¥{{item.shippingPrice}}</text>
											<text class="desc">元/{{item.unit}}</text>
										</view>
									</view> -->
								</view>

								<view class="state-info">
									<view class="progress">
										<view class="progress-bg">
											<view class="progress-cover"
												:style="{width: item.shippedNum/item.planShippingNum*100 + '%'}"></view>
										</view>
										<view class="progress-text">
											已抢{{(item.shippedNum/item.planShippingNum*100).toFixed(2)}}%，还剩{{item.planShippingNum - item.shippedNum}}{{item.unit}}
										</view>
									</view>
									<view class="timeout"
										v-if="(new Date(item.goodsTimeEnd).getTime() - new Date().getTime() > 0)">
										<image src="../../static/icon_time.png" mode=""></image>
										<uni-countdown :show-day="computeFlag(item.goodsTimeEnd)"
											:day="computeDay(item.goodsTimeEnd, 1)" :hour="computeDay(item.goodsTimeEnd, 2)"
											:minute="computeDay(item.goodsTimeEnd, 3)"
											:second="computeDay(item.goodsTimeEnd, 4)" color="#F00" :font-size="12" />
										</uni-section>
									</view>
								</view>
							</view>
							<view class="right" @click.stop="onTake(item)">抢单</view>
						</view>
					</view>
					<view class="empty" v-if="!orderList.length">
						<view style="margin-bottom: 50rpx;">
							<image mode="aspectFit" src="../../static/icon_supply_img.png"></image>
						</view>
						<view>当前暂无可抢订单</view>
					</view>
				</mescroll-body>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="popup-wrap">
				<view class="item">
					<view style="margin-right: 24rpx;"><text>*</text> 数量:</view>
					<view class="flex">
						<input v-model="quantity" :disabled="pricingMethodFlag" class="input" type="digit"
							placeholder="输入数量" @input="quantityInputChange">
						<view>{{unit}}/车</view>
					</view>
				</view>
				<view class="item">
					<view style="margin-right: 24rpx;"><text>*</text> 车辆:</view>
					<view class="flex">
						<view class="input">
							<picker @change="bindPickerChange" :value="vehicleIndex" :range="vehicleArray">
								<view :style="{ color: plate == '请选择' ? '#999999' : '#333333' }">{{plate}}</view>
							</picker>
						</view>
						<view class="add" @click="goAdd">+新增车辆</view>
					</view>
				</view>
				<view class="item" style="margin-bottom: 20rpx;margin-top: 20rpx; align-items: center;">
					<checkbox :checked="issigncheckbox" style="transform:scale(0.7)" @click="signcheckbox()"></checkbox>
					<view style="font-weight: bold;font-size: 26rpx;" @click="opensign()">我已同意签订该合约</view>
				</view>
				<view class="btn-box">
					<view class="cancel" @click="onCancel">取消</view>
					<view class="confirm" @click="postGoodsReceive">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import citySelect from "./marketModal/citySelect.vue"
	export default {
		mixins: [MescrollMixin],
		components: {citySelect},
		data() {
			return {
				sortTYpe: 0,
				indexEtp: 0,
				etpName: '请选择',
				etpId: '',
				etpList: [],
				etpArray: [],

				orderList: [],
				
				regionList: [],

				waybillId: '',
				quantity: '',
				vehicleId: '',
				plate: '请选择',
				currentVehicle: [],
				vehicleArray: [],
				vehicleIndex: 0,
 
				unit: '',
				pricingMethodFlag: false,
				goodsLoad: '',

				issigncheckbox: true,
				messagetips: '',
				userInfo: {},
				buesinessNum: '',
				
				showMask: false, // 筛选
				showFilter: false,
				
				// 线路选择框
				areaListsStart:[],
				areaListsEnd:[],
				startIndex: [0, 0],
				endIndex: [0, 0],
				// 线路输入框
				startCity: "0",
				endCity: "0",
				
				longList: [],
				longIndex: -1,
				
				goodsName: '',
				itemName: '',
				goodsRemarks: '',
				
				showContact: false,
				
				pageNum: 1,
				pages: 0
			}
		},
		onLoad() {
			this.getUserEtp()
			// this.getMessage()
			// this.userInfo = uni.getStorageSync(this.DATA_KEY.userInfo);
			console.log(this.userInfo)
			this.getArga()
		},
		onShow() {
			this.userInfo = uni.getStorageSync(this.DATA_KEY.userInfo);
			this.etpId = uni.getStorageSync(this.DATA_KEY.etpId)
			if (!this.userInfo.mobile && this.orderList.length) {
				wx.reLaunch({
					url: "/pages/index/taskhome"
				})
			}
			this.getUserEtp()
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
			this.canReset && this.mescroll.scrollTo(0,0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
			this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
			// this.postGoodsSquareList()
			this.getMessage()
		},
		methods: {
			//获取消息中心按钮展示什么数据
			getMessage() {
				console.log(this.userInfo.driverId, 11111111111111111) //1388720967634649555
				this.wxRequest({
					url: `${this.API}/driverMessageCommon/queryBellNum`,
					method: 'POST',
					data: {
						"driverId": this.userInfo.driverId,
						"etpId": uni.getStorageSync(this.DATA_KEY.etpId)
					},
					success: res => {
						console.log(res)
						if (res.data.code == 0) {
							let info = res.data.data
							// businessdriver 业务进度capitaldriver 资金变动  certification账号资质
							if (!info.certificationNum && info.buesinessNum && !info.daibanNum && !info
								.capiatlNum) {
								this.messagetips = ''
								this.buesinessNum = info.buesinessNum
							} else {
								this.messagetips = info.certificationNum + info.capiatlNum + info.daibanNum
								this.daibanNum = info.daibanNum
								this.buesinessNum = info.buesinessNum
							}
						}
					}
				})
			},
			//跳转到消息中心页面
			jumpMessage() {
				uni.navigateTo({
					url: '/pages/message/index'
				});
			},
			opensign() {
				if (!this.vehicleId) {
					uni.showToast({
						title: '请先选择车辆',
						icon: 'none'
					});
					return
				}
				uni.navigateTo({
					url: `../task/singlesign?loadingOrderId=${this.waybillId}&&flag=true&&vehicleId=${this.vehicleId}`
				});
			},
			signcheckbox: function() {
				this.issigncheckbox = !this.issigncheckbox;
			},
			onTake(item) {
				console.log(this.etpName)
				console.log(this.etpId)
				this.wxRequest({
					url: `${this.API}/blacklist/queryBlacklist`,
					method: 'POST',
					data: {
						etpId: this.etpId,
						typeId: "1", //id类型 1司机 2车辆
						driverVehicleId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId
					},
					success: res => {
						if (res.data.data) {
							uni.showModal({
								title: '禁止接单',
								content: `您已被${this.etpName}列为黑名单`,
								showCancel: false,
								confirmText: '确定',
								confirmColor: '#49A9F0',
								success: function(res) {

								}
							});
						} else {
							if (item.planShippingNum - item.shippedNum <= 0) return
							this.waybillId = item.waybillId
							this.unit = item.unit
							if (item.unit === '车' || item.unit === '箱') {
								this.pricingMethodFlag = true;
								this.quantity = 1;
							}
							if (item.pricingMethod == 2 && item.goodsLoad) {
								this.pricingMethodFlag = true
								this.quantity = item.goodsLoad
							}
							this.$refs.popup.open()
							this.oncarlist()
						}
					}
				});
			},
			postGoodsReceive() {
				if (!this.quantity) {
					uni.showToast({
						title: '请先输入数量',
						icon: 'none'
					});
					return
				}
				if (this.unit === '吨') {
					let reg = /^(([1-9]{1}\d{0,1})|(0{1}))(\.\d{1,4})?$/
					if (!reg.test(this.quantity)) {
						uni.showToast({
							title: '数量小数点前最多2位，小数点后最多4位',
							icon: 'none'
						})
						return
					}
				}
				if (this.unit === '立方' || this.unit === '纸箱') {
					let reg = /^(([1-9]{1}\d{0,2})|(0{1}))(\.\d{1,2})?$/
					if (!reg.test(this.quantity)) {
						uni.showToast({
							title: '数量小数点前最多3位，小数点后最多2位',
							icon: 'none'
						})
						return
					}
				}
				if (this.unit === '件') {
					let reg = /^[1-9]\d{0,3}$/
					if (!reg.test(this.quantity)) {
						uni.showToast({
							title: '数量最多4位整数',
							icon: 'none'
						})
						return
					}
				}
				
				if (this.unit.includes('集装箱')) {
					let reg = /^[12]$/;
					if (!reg.test(this.quantity)) {
						uni.showToast({
							title: '请输入正确的运输数量',
							icon: 'none'
						})
						return
					}
				}
				if (!this.vehicleId) {
					uni.showToast({
						title: '请先选择车辆',
						icon: 'none'
					});
					return
				}
				if (!this.issigncheckbox) {
					uni.showToast({
						title: '请勾选同意相关选项',
						icon: 'none'
					});
					return
				}
				this.getGoodsValidation()
			},
			goodsReceive() {
				this.wxRequest({
					url: `${this.API}/miniApp/loadingOrder/goodsReceive`,
					method: 'POST',
					data: {
						waybillId: this.waybillId, //运单id
						driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId, //司机id
						vehicleId: this.vehicleId, //车辆id
						quantity: this.quantity, //数量
						// #ifdef MP-WEIXIN
						clickLocation: "2" //数据来源1.APP 2.小程序
						// #endif
						// #ifdef APP-PLUSƒ
						clickLocation: "1" //数据来源1.APP 2.小程序
						// #endif
					},
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						console.log(res)
						this.onCancel()
						uni.showToast({
							title: '抢单成功',
							icon: 'none'
						});

						// this.postGoodsSquareList()
						this.mescroll.resetUpScroll()
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			getGoodsValidation() {
				this.wxRequest({
					url: `${this.API}/miniApp/loadingOrder/goodsValidation?waybillId=${this.waybillId}&quantity=${this.quantity}`,
					method: 'GET',
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						this.goodsReceive()
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			//	查询车辆列表
			oncarlist() {
				let driverId = uni.getStorageSync(this.DATA_KEY.userInfo).driverId;
				this.wxRequest({
					url: `${this.API}/driverService/getDriverVehicle?driver_id=` + driverId + '&etp_id=' + uni
						.getStorageSync(this.DATA_KEY.etpId),
					method: 'POST',
					title: '加载中...',
					success: res => {
						this.currentVehicle = res.data.data.currentList
						this.vehicleArray = []
						this.currentVehicle.forEach(item => {
							this.vehicleArray.push(item.plateNum)
						})
					}
				});
			},

			computeFlag(time) {
				let now = new Date().getTime()
				let end = new Date(time).getTime()
				console.log(end - now)
				let timeNum = 24 * 60 * 60
				if (end - now > 0) {
					if (end - now - timeNum > 0) {
						return true
					} else {
						return false
					}
				} else {
					return false
				}
			},
			computeDay(time, num) {
				let now = new Date().getTime()
				let end = new Date(time).getTime()
				let diffTime = end - now
				let day, hour, minute, second;
				if (diffTime >= 0) {
					day = Math.floor(diffTime / 1000 / 60 / 60 / 24);
					hour = Math.floor(diffTime / 1000 / 60 / 60 % 24);
					minute = Math.floor(diffTime / 1000 / 60 % 60);
					second = Math.floor(diffTime / 1000 % 60);
				}
				if (num === 1) return day
				if (num === 2) return hour
				if (num === 3) return minute
				if (num === 4) return second
			},
			//	切换企业
			changeEtp(e) {
				this.indexEtp = e.detail.value
				if (this.etpName == this.etpArray[this.indexEtp]) {
					return
				}
				this.etpName = this.etpArray[this.indexEtp]
				let obj = this.etpList.filter(item => {
					return item.etpName === this.etpName
				})
				this.etpId = obj[0].etpId
				this.sortTYpe = 0
				// this.postGoodsSquareList()
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				if (!this.userInfo.mobile) {
					this.mescroll.endErr()
					return
				}
				this.wxRequest({
					url: `${this.API}/waybill/goodsSquareList`,
					method: 'POST',
					data: {
						pageNum: page.num, //页数
						pageSize: page.size, //显示个数
						etpId: this.etpId, //企业id
						sortType : this
							.sortTYpe, //排序条件：0.默认排序（根据运单id降序）1.开始时间降序2.开始时间升序3.运输金额降序4.运输金额升序5.截止时间降序6.截止时间升序
						// shippingCityId: this.startIndex[0]?this.areaListsStart[1][this.startIndex[1]].value:'',
						// receiptCityId: this.endIndex[0]?this.areaListsEnd[1][this.endIndex[1]].vlaue:'',
						shippingCityId: this.startCity == '0' ? '' : this.startCity,
						receiptCityId: this.endCity == '0' ? '' : this.endCity,
						goodsRemarks: this.goodsRemarks,
						itemName: this.itemName,
						goodsName: this.goodsName,
						oftenShippingCityIdList: this.longIndex>-1?[this.longList[this.longIndex].cityIdStart1, this.longList[this.longIndex].cityIdStart2, this.longList[this.longIndex].cityIdStart3].filter(item => item !== "" ):[],
						oftenReceiptCityIdList: this.longIndex>-1?[this.longList[this.longIndex].cityIdEnd1, this.longList[this.longIndex].cityIdEnd2, this.longList[this.longIndex].cityIdEnd3].filter(item => item !== "" ):[]
					},
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						console.log(res)
						if (page.num == 1) {
							this.orderList = []
						}
						this.orderList = this.orderList.concat(res.data.data.list) 
						this.pages = res.data.data.pages
						this.mescroll.endByPage(res.data.data.list, this.pages); 
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			//	获取列表
			postGoodsSquareList() {
				this.wxRequest({
					url: `${this.API}/waybill/goodsSquareList`,
					method: 'POST',
					data: {
						pageNum: this.pageNum, //页数
						pageSize: "10", //显示个数
						etpId: this.etpId, //企业id
						sortType : this
							.sortTYpe, //排序条件：0.默认排序（根据运单id降序）1.开始时间降序2.开始时间升序3.运输金额降序4.运输金额升序5.截止时间降序6.截止时间升序
						shippingCityId: this.startIndex[0]?this.areaListsStart[1][this.startIndex[1]].value:'',
						receiptCityId: this.endIndex[0]?this.areaListsEnd[1][this.endIndex[1]].vlaue:'',
						goodsRemarks: this.goodsRemarks,
						itemName: this.itemName,
						goodsName: this.goodsName,
						oftenShippingCityIdList: this.longIndex>-1?[this.longList[this.longIndex].cityIdStart1, this.longList[this.longIndex].cityIdStart2, this.longList[this.longIndex].cityIdStart3].filter(item => item !== "" ):[],
						oftenReceiptCityIdList: this.longIndex>-1?[this.longList[this.longIndex].cityIdEnd1, this.longList[this.longIndex].cityIdEnd2, this.longList[this.longIndex].cityIdEnd3].filter(item => item !== "" ):[]
					},
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						if (this.pageNum == 1) {
							this.orderList = []
						}
						this.orderList = this.orderList.concat(res.data.data.list) 
						this.pages = res.data.data.pages
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			//	获取企业信息
			getUserEtp() {
				console.log(uni.getStorageSync(this.DATA_KEY.etpName))
				this.wxRequest({
					url: `${this.API}/waybill/getUserEtp`,
					method: 'GET',
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						this.etpArray = []
						this.etpList = res.data.data
						this.etpList.forEach(item => {
							this.etpArray.push(item.etpName)
						})
						// this.etpName = this.etpArray[0]
						this.etpName = uni.getStorageSync(this.DATA_KEY.etpName)
						// this.etpId = this.etpList[0].etpId
						this.etpId = uni.getStorageSync(this.DATA_KEY.etpId)
						this.indexEtp = this.etpArray.findIndex((item) => {
							return item == this.etpName
						})
						console.log(this.etpId)
						// this.postGoodsSquareList()
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			bindPickerChange(e) {
				this.vehicleIndex = e.detail.value
				this.plate = this.vehicleArray[this.vehicleIndex]
				let arr = this.currentVehicle.filter(item => {
					return item.plateNum === this.plate
				})
				console.log(arr)
				this.vehicleId = arr[0].vehicleId
				console.log(this.vehicleId)
				console.log(this.etpId)
				console.log(this.etpName)
				this.wxRequest({
					url: `${this.API}/blacklist/queryBlacklist`,
					method: 'POST',
					data: {
						etpId: this.etpId,
						typeId: "2", //id类型 1司机 2车辆
						driverVehicleId: this.vehicleId
					},
					success: res => {
						if (res.data.data) {
							this.$refs.popup.close()
							uni.showModal({
								title: '禁止接单',
								content: `车辆：${this.plate}已被${this.etpName}列为黑名单，请更换其他车辆`,
								showCancel: false,
								confirmText: '确定',
								confirmColor: '#49A9F0',
								success: res => {
									this.onCancel()
								}
							});
						}
					}
				});
			},
			onCancel() {
				this.plate = '请选择'
				this.vehicleIndex = 0
				this.quantity = ''
				this.waybillId = ''
				this.pricingMethodFlag = false
				this.$refs.popup.close()
			},
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone.toString(),
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/vehicle/vehicleinformation?vehicleId=0',
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: `./detail?id=${id}`
				})
			},
			selectTeam(num) {
				if (num === 1) {
					this.sortTYpe != 1 ? this.sortTYpe = 1 : this.sortTYpe = 2
				}
				if (num === 2) {
					this.sortTYpe != 3 ? this.sortTYpe = 3 : this.sortTYpe = 4
				}
				if (num === 3) {
					this.sortTYpe != 5 ? this.sortTYpe = 5 : this.sortTYpe = 6
				}
				// this.postGoodsSquareList()
				this.mescroll.resetUpScroll()
			},
			onMask() {
				this.showMask = !this.showMask
				this.showFilter = !this.showFilter
			},
			onBtn() {
				this.showMask = !this.showMask
				this.showFilter = !this.showFilter
				if (this.showFilter) {
					this.getLong()
				}
			},
			moveHandle() {},
			bindPickerChangeStart(e) {
				this.startIndex = e.detail.value
				console.log(this.startIndex)
			},
			bindPickerChangeEnd(e) {
				this.endIndex = e.detail.value
				console.log(this.endIndex)
			},
 			columnchangeStart(e) {
				console.log(e)
				if (e.detail.column === 0) {
					this.areaListsStart[1] = this.areaList[e.detail.value].children
					if (e.detail.value == 0) {
						this.areaListsStart[1] = [{label: '全国', value: '0'}]
					}
					this.areaListsStart = JSON.parse(JSON.stringify(this.areaListsStart))
				}
			},
			columnchangeEnd(e) {
				console.log(e)
				if (e.detail.column === 0) {
					this.areaListsEnd[1] = this.areaList[e.detail.value].children
					if (e.detail.value == 0) {
						this.areaListsEnd[1] = [{label: '全国', value: '0'}]
					}
					this.areaListsEnd = JSON.parse(JSON.stringify(this.areaListsEnd))
				}
			},
			getArga() {
				this.wxRequest({
					url: `${this.API}/basis/qvoRegion/selectRegionCity`,
					method: 'GET',
					success: res => {
						console.log(res)
						let list = res.data.data
						this.regionList = list
						// this.areaList = [{label: '全国',value: '', children: ""}, ...list]
						// this.areaListsStart[0] = [{label: '全国',value: '', children: ""}, ...list]
						// this.areaListsStart[1] = [{label: '全国', value: '0'}]
						// this.areaListsEnd[0] = [{label: '全国',value: '', children: ""}, ...list]
						// this.areaListsEnd[1] = [{label: '全国', value: '0'}]
						// this.areaListsStart = JSON.parse(JSON.stringify(this.areaListsStart))
						// this.areaListsEnd = JSON.parse(JSON.stringify(this.areaListsEnd))
					}
				});
				
			},
			getLong() {
				this.wxRequest({
					url: `${this.API}/driverRoute/getDriverRouteList`,
					method: 'POST',
					success: res => {
						console.log(res)
						this.longList = res.data.data
					}
				});
			},
			longSelcet(index) {
				if (index === this.longIndex) {
					this.longIndex = -1
				} else {
					this.longIndex = index
				}
				
			},
			clearInput(name) {
				console.log(name)
				this[name] = ''
			},
			onFloatSubmit() {
				this.showMask = false
				this.showFilter = false
				// this.postGoodsSquareList()
				this.mescroll.resetUpScroll()
			},
			onFloatReset() {
				// this.areaListsStart[1] = [{label: '全国', value: '0'}]
				// this.areaListsEnd[1] = [{label: '全国', value: '0'}]
				// this.startIndex = [0, 0]
				// this.endIndex = [0, 0]
				this.startCity = "0"
				this.endCity = "0"
				this.longIndex = -1
				this.goodsName = ''
				this.itemName = ''
				this.goodsRemarks = ''
			},
			quantityInputChange(e) {
				// const value = e.target.value.toString();
				// console.log(value)
				// if (this.unit === '吨') {
				// 	if (value.indexOf('.') !== -1) {
				// 		let valueArr = value.split('.');
				// 		if (valueArr[0].length > 2) {
				// 			this.$nextTick(() => {
				// 				this.quantity = valueArr[0].slice(0, 2) + '.' + valueArr[1]
				// 				uni.showToast({
				// 					title: "整数部分不能超过两位",
				// 					icon: "none"
				// 				})
				// 			})
				// 		}
				// 		if (valueArr[1].length > 4) {
				// 			this.$nextTick(() => {
				// 				this.quantity = valueArr[0] + '.' + valueArr[1].slice(0, 4)
				// 				uni.showToast({
				// 					title: "小数部分不能超过四位",
				// 					icon: "none"
				// 				})
				// 			})
				// 		}
				// 	} else {
				// 		if (value.length > 2) {
				// 			this.$nextTick(() => {
				// 				this.quantity = parseFloat(value.slice(0, 2))
				// 				uni.showToast({
				// 					title: "整数部分不能超过两位",
				// 					icon: "none"
				// 				})
				// 			})
				// 		}
				// 	}
				// } else if (this.unit === '件') {
				// 	e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
				// 	this.$nextTick(() => {
				// 		this.quantity = e.target.value
				// 	})
				// } else if (this.unit === '立方') {
				// 	if (value.indexOf('.') !== -1) {
				// 		let valueArr = value.split('.');
				// 		if (valueArr[0].length > 3) {
				// 			this.$nextTick(() => {
				// 				this.quantity = valueArr[0].slice(0, 3) + '.' + valueArr[1]
				// 				uni.showToast({
				// 					title: "整数部分不能超过三位",
				// 					icon: "none"
				// 				})
				// 			})
				// 		}
				// 		if (valueArr[1].length > 2) {
				// 			this.$nextTick(() => {
				// 				this.quantity = valueArr[0] + '.' + valueArr[1].slice(0, 2)
				// 				uni.showToast({
				// 					title: "小数部分不能超过两位",
				// 					icon: "none"
				// 				})
				// 			})
				// 		}
				// 	} else {
				// 		if (value.length > 2) {
				// 			this.$nextTick(() => {
				// 				this.quantity = parseFloat(value.slice(0, 3))
				// 				uni.showToast({
				// 					title: "整数部分不能超过三位",
				// 					icon: "none"
				// 				})
				// 			})
				// 		}
				// 	}
				// }
			},
		},
		// onReachBottom() {
		// 	if (this.pageNum >= this.pages) return
		// 	this.pageNum ++
		// 	this.postGoodsSquareList()
		// }
	}
</script>

<style lang="scss">
	.messagetips {
		float: right;
		position: relative;
		right: 0;

		text {
			padding: 10rpx;
			color: #FFFFFF;
			border-radius: 10rpx;
			right: 5rpx;
			background: #ff1606;
			position: absolute;
			font-size: 24rpx;
		}

		.tipstext {
			padding: 0rpx 8rpx;
			border-radius: 12rpx;
			right: -6rpx;
			top: -10rpx;
		}
	}

	.empty {
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-self: center;
		color: #999;
	}

	.top {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		padding: 24rpx;
		color: #333;
		justify-content: space-between;

		// background: #fff;
		image {
			width: 20rpx;
			height: 20rpx;
			padding-right: 10rpx;
		}
	}

	.uni-countdown__splitor {
		margin: 0 !important;
		color: #f00 !important;
	}

	.popup-wrap {
		background: #fff;
		border-radius: 10rpx;
		padding: 48rpx;

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				padding: 10rpx 48rpx;
				color: #fff;
				border-radius: 8rpx;
				font-size: 28rpx;
			}

			.cancel {
				background: #ccc;
				margin-right: 32rpx;
			}

			.confirm {
				background: #4089ff;
			}
		}

		.item {
			display: flex;
			align-items: center;
			margin-bottom: 48rpx;
			font-size: 28rpx;
			color: #333;

			text {
				color: #ff0000;
			}

			.input {
				width: 200rpx;
				height: 58rpx;
				border: 1rpx solid #eee;
				font-size: 28rpx;
				padding: 0 32rpx;
				margin-right: 24rpx;
				line-height: 58rpx;
			}

			.add {
				color: #4089ff;
			}
		}

		.flex {
			display: flex;
			align-items: center;
		}
	}

	.body-wrap {
		.item {
			background: #fff;
			margin: 12rpx 0;
			padding: 24rpx;
		}

		.company {
			margin-bottom: 12rpx;
			font-size: 30rpx;
			color: #333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			.name {
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.phone {
				width: 30%;
				color: #1199eb;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 38rpx;
					height: 38rpx;
					margin-right: 12rpx;
				}
			}
		}

		.info-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #4089ff;

			.left {
				flex: 1;
				background: #fff;

				.state-info {
					padding-top: 24rpx;
					padding-right: 12rpx;
					box-sizing: border-box;
					border-top: 1rpx solid #ccc;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					box-sizing: border-box;

					.progress {
						position: relative;
						width: 100%;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						width: 60%;

						.progress-bg {
							width: 30%;
							height: 16rpx;
							border-radius: 16rpx;
							// border: .5rpx solid #ccc;
							overflow: hidden;
							position: relative;
							background: #F7F8FA;

							.progress-cover {
								position: absolute;
								top: 0;
								left: 0;
								background: #008001;
								height: 16rpx;
								border-radius: 6rpx 0 0 6rpx;
							}
						}

						.progress-text {
							margin-left: 12rpx;
							color: #666;
							font-size: 22rpx;
						}
					}

					.timeout {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40%;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.goods-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 12rpx 0;
					padding-right: 12rpx;

					.goods {
						color: #0478fd;
						font-weight: bold;
						font-size: 38rpx
					}

					.price-info {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #666;

						.desc {
							font-size: 24rpx;
						}

						.price {
							display: flex;
							justify-content: center;
							align-items: baseline;
							margin-left: 24rpx;

							.red {
								font-weight: bold;
								color: #ff0000;
								font-size: 34rpx;
								margin-right: 12rpx;
							}
						}
					}
				}

				.time {
					font-size: 28rpx;
					color: #666;
					margin: 12rpx 0;
				}

				.line {
					margin: 12rpx 0;
					font-size: 30rpx;

					image {
						width: 20rpx;
						height: 20rpx;
						margin: 10rpx 0 2rpx 12rpx;
					}

					.address {
						color: #333;
						font-weight: 400;
						display: flex;
						align-items: center;

						.text {
							line-height: 50rpx;
						}

						.circle {
							border-radius: 50%;
							color: #fff;
							margin-right: 12rpx;
							padding: 4rpx 10rpx;
						}

						.start {
							background: #008001;
						}

						.end {
							background: #ff0000;
						}
					}
				}
			}

			.right {
				width: 100rpx;
				color: #fff;
				text-align: center;
				padding: 120rpx 0;
			}
		}
	}

	.filter-wrap {
		background: #fff;
		padding: 12rpx 0;

		.filter {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.right {
				width: 50rpx;
				margin-left: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 24rpx;
				}
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #333333;
				width: 33.33%;
				line-height: 50rpx;

				.active {
					color: #003E81;
				}
			}

			.icon-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				height: 28rpx;
				margin-left: 16rpx;
			}

			.down-triangle {
				width: 0;
				height: 0;
				border-top: 10rpx solid #ccc;
				border-right: 10rpx solid transparent;
				border-left: 10rpx solid transparent;

				&.active {
					border-top: 10rpx solid #4089ff;
				}
			}

			.up-triangle {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 10rpx solid #ccc;

				&.active {
					border-bottom: 10rpx solid #4089ff;
				}
			}
		}

	}
	
	
	.filter-wrapper{
	  position: relative;
	}
	.filter-btn {
	  position: relative;
	}
	.float--active {
	  position: absolute;
	  top: 40rpx;
	  right: 10rpx;
	  margin: 0 auto;
	  z-index: 10010;
	  // height: 80vh;
	  // transition: all .2s linear;
	  border-radius: 20rpx;
	  overflow: hidden;
	  box-shadow: 0 4rpx 4rpx 2rpx rgba(124, 124, 124, 0.3);
	  background: #FFFFFF;
	  display: block;
	}
	.float-list-box {
	  position: absolute;
	  z-index: 10010;
	  top: 40rpx;
	  right: 10rpx;
	  margin: 0 auto;
	  height: 0;
	  overflow: hidden;
	  // transition: all .2s linear;
	  background: #FFFFFF;
	  display: none;
	}
	.float-list {
		padding: 40rpx;
	}
	.float-title {
		font-size: 32rpx;
		color: #3D3D3D;
		font-weight: bold;
		line-height: 40rpx;
		margin-bottom: 20rpx;
	}
	.float-content {
		margin-bottom: 20rpx;
	}
	.float-content-area {
		display: flex;
		align-items: center;
	}
	.float-content-area_item {
		// border: 2rpx solid #e5e5e5;
		// border-radius: 10rpx;
		flex: 1;
		// padding: 8rpx 20rpx;
		// position: relative;
	}
	.float-content-area_item--select {
		min-height: 28rpx;
		font-size: 28rpx;
		color: #3D3D3D;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;  //使用自适应布局
		-webkit-line-clamp: 2;  //设置超出行数，要设置超出几行显示省略号就把这里改成几
		-webkit-box-orient: vertical;
	}
	
	.float-content-area-l {
		
	}
	.float-content-area-l_item {
		padding: 6px 10px;
		min-height: 14px;
		font-size: 14px;
		color: #3D3D3D;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		position: relative;
		margin-bottom: 20rpx;
		overflow: hidden;
		line-height: 14px;
	}
	.float-content-area-l_item.active {
		border: 2rpx solid #0478fd;
		color: #0478fd;
	}
	.float-content-area-l_item.active::after {
		content: " ";
		position: absolute;
		bottom: -1px;
		right: 0;
		width: 0;
		height: 0;
		border-color: transparent #0478fd transparent transparent;
		border-style: solid;
		border-width: 20px 20px 0 0;
	}
	.float-content-area-l_item--select {
		display: inline;
	}
	.float-content-input {
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		display: flex;
		align-items: center;
		padding: 3px 10px;
		min-height: 14px;
	}
	.float-content-input-input {
		flex: 1;
		font-size: 14px;
		color: #3D3D3D;
		height: 20px;
	}
	.float-content-input-close {
		display: flex;
		align-items: center;
	}
	
	.float-footer {
		display: flex;
		align-items: center;
	}
	.float-footer-button {
		flex: 1;
	}
	.float-footer-button button {
		width: 100%;
	}
	
	.mask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  opacity: 0;
	  pointer-events: auto;
	  transition: -webkit-transform 0.3s;
	  transition: transform 0.3s;
	  transition: transform 0.3s, -webkit-transform 0.3s;
	}
	.mask-zoom {
	  transform: scale(1.2, 1.2);
	}
	.mask-show {
	  opacity: 1;
	}
	
</style>